<template>
    <div class="detail-wrapper">
      <el-dialog
        title="发运计划详情"
        :visible.sync="detailVisible">
        <div class="detail">
          <table class="detail-table" cellspacing="0" cellpadding="0">
            <tr>
              <td class="table-title">业务编号</td>
              <td class="table-content">{{viewForm.business.codes}}</td>
              <td class="table-title">往来名称</td>
              <td class="table-content">{{viewForm.business.companyName}}</td>
            </tr>
            <tr>
              <td class="table-title">货物</td>
              <td class="table-content">{{viewForm.product.name}}</td>
              <td class="table-title">本次运量</td>
              <td class="table-content">{{viewForm.transQuantity}} 吨</td>
            </tr>
            <tr>
              <td class="table-title">发运期间</td>
              <td class="table-content time"><span>{{viewForm.sendStartDate}}</span><span>~</span><span>{{viewForm.sendEndDate}}</span></td>
              <td class="table-title">车数</td>
              <td class="table-content"><span v-if="viewForm.truckAxle!==undefined">{{viewForm.truckAxle.axle}}</span><span>{{viewForm.truckNumPlanned}} 车</span></td>
            </tr>
            <tr>
              <td class="table-title">路耗单价</td>
              <td class="table-content">{{viewForm.lossPrice}} 元/吨</td>
              <td class="table-title">运费单价</td>
              <td class="table-content">{{viewForm.transPrice}} 元/吨</td>
            </tr>
            <tr>
              <td class="table-title">发货地址</td>
              <td class="table-content">{{viewForm.sendAddress}}</td>
              <td class="table-title">派车联系人</td>
              <td class="table-content"><span>{{viewForm.transContact}}</span><span>{{viewForm.transPhone}}</span></td>
            </tr>
            <tr>
              <td class="table-title">收货地址</td>
              <td class="table-content">{{viewForm.receiveAddress}}</td>
              <td class="table-title">收货联系人</td>
              <td class="table-content"><span>{{viewForm.receiveContact}}</span><span>{{viewForm.receivePhone}}</span></td>
            </tr>
            <tr>
              <td class="table-title">执行期间</td>
              <td class="table-content time"><span>{{viewForm.execStartDate}}</span><span>~</span><span>{{viewForm.execEndDate}}</span></td>
              <td class="table-title">运费结算依据</td>
              <td class="table-content">{{$dictUtils.getDictLabel("transMoneyBasis", viewForm.transMoneyBasis, "")}}</td>
            </tr>
          </table>
        </div>
      </el-dialog>
    </div>
</template>

<script>
    export default {
      name: 'dispatchDetail',
      data () {
        return {
          detailVisible: false,
          viewForm: {
            business: {
              codes: '',
              companyName: ''
            },
            product: {
              name: ''
            },
            transQuantity: '',
            sendStartDate: '',
            sendEndDate: '',
            truckNumPlanned: '',
            truckAxle: {
              axle: ''
            },
            lossPrice: '',
            transPrice: '',
            sendAddress: '',
            transContact: '',
            transPhone: '',
            receiveAddress: '',
            receiveContact: '',
            receivePhone: '',
            execStartDate: '',
            execEndDate: '',
            transMoneyBasis: ''
          }
        }
      },
      methods: {
        init (method, editForm) {
          if (method === 'detail') {
            this.detailVisible = true
            this.viewForm = editForm
          }
        }
      }
    }
</script>

<style lang="scss" scoped>
  .detail-wrapper{
    ::v-deep.el-dialog{
      width: fit-content;

      .el-dialog__header{
        padding: 0 20px !important;
        height: 41px;
        line-height: 41px;
      }

      .el-dialog__headerbtn{
        top: 11px;
      }
      .el-dialog__title{
        font-size: 16px;
        color: #333333;
      }
      .el-dialog__body{
        padding: 20px !important;

        .detail-table{
          border: 1px solid #DDDDDD;
          border-bottom: none;
          td{
            padding: 12px 10px;
            border-right: 1px solid #DDDDDD;
            border-bottom: 1px solid #DDDDDD;
          }
          .table-title{
            width: 125px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #999999;
          }
          .table-content{
            width: 260px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;

            span:first-child{
              margin-right: 20px;
            }
          }
          .table-content.time{
            span:first-child{
              margin-right: 0;
            }
            span:nth-child(2){
              margin: 0 5px;
            }
          }
        }
      }
    }

  }
</style>
